<template>
  <div class="dashboard">
    <Header />
    <div class="content">
      <div class="center-panel">
        <UnrealViewer ref="UnrealViewerRef" @connection-msg="UeCallJsMsg" />
        <div class="btn_send_msg" @click="handleCallUe">向UE发送事件</div>
      </div>
      <LeftPanel />
      <RightPanel />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from '@/components/Dashboard/Header.vue'
import LeftPanel from '@/components/Dashboard/LeftPanel.vue'
import RightPanel from '@/components/Dashboard/RightPanel.vue'
import UnrealViewer from '@/components/UnrealViewer/index.vue'

const UnrealViewerRef = ref()
// 调用Ue事件
const handleCallUe = () => {
  UnrealViewerRef.value.CallUE('JSCallUE')
}

// 接收Ue消息
const UeCallJsMsg = msg => {
  // 检查数据是否为对象
  if (typeof msg === 'object') {
    // 处理对象类型的消息
    if (msg.type && msg.payload) {
      switch (msg.type) {
        case 'MyCustomEvent':
          console.log('收到自定义事件:', msg.payload)
          break
        case 'CoordinateData':
          if (msg.payload.x !== undefined && msg.payload.y !== undefined) {
            const screenCoords = coordinateMapper.ueToScreen(msg.payload.x, msg.payload.y)
            handleCoordinateUpdate(screenCoords.x, screenCoords.y, msg.payload.x, msg.payload.y)
          }
          break
        case 'AnotherEvent':
          console.log('收到其他事件:', msg.payload)
          break
        default:
          console.log('收到未知类型事件:', msg)
      }
    }
  } else if (typeof msg === 'string') {
    // 处理字符串类型的消息
    switch (msg) {
      case 'MyCustomEvent':
        console.log('收到自定义字符串事件')
        break
      case 'AnotherEvent':
        console.log('收到其他字符串事件')
        break
      default:
        console.log('收到未知字符串事件:', msg)
    }
  }
}
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

.dashboard {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $bg-color;
  color: $text-color;

  .header {
    height: calc($header-height * var(--scale-ratio));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 $padding-base;
    background-color: $bg-header;

    .title {
      font-size: $font-size-xxl;
      font-weight: bold;
    }

    .time,
    .weather {
      font-size: $font-size-lg;
    }
  }

  .content {
    position: relative;
    height: calc(100% - #{$header-height} * var(--scale-ratio));
    overflow: hidden;

    .left-panel,
    .right-panel {
      position: absolute;
      top: calc($padding-base * var(--scale-ratio));
      width: calc($sidebar-width * var(--scale-ratio));
      background-color: $bg-panel;
      padding: calc($padding-sm * var(--scale-ratio));
      border-radius: $border-radius;
      z-index: 10;
    }

    .left-panel {
      left: calc($padding-base * var(--scale-ratio));
    }

    .right-panel {
      right: calc($padding-base * var(--scale-ratio));
    }

    .center-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $bg-panel;
      border-radius: $border-radius;
      z-index: 1;

      #map-container {
        width: 100%;
        height: 100%;
      }
    }
  }

  .data-card {
    h3 {
      margin-bottom: $padding-sm;
      font-size: $font-size-xl;
    }

    .data-list {
      .data-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: $padding-xs;

        .value {
          color: $info-color;
          font-size: $font-size-xl;
        }
      }
    }
  }

  .monitor-list {
    h3 {
      margin-bottom: $padding-sm;
      font-size: $font-size-xl;
    }

    .monitor-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: $padding-xs;
      border-bottom: 1px solid $border-color;

      .point-status {
        &.normal {
          color: $success-color;
        }

        &.warning {
          color: $warning-color;
        }

        &.error {
          color: $error-color;
        }
      }
    }
  }
}
.btn_send_msg {
  cursor: pointer;
  position: fixed;
  bottom: 68px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #48b3f1;
  padding: 12px 24px;
  color: #fff;
  border-radius: 24px;
}
</style>
